<template>
  <div style="margin-top: 2rem;" >
    <Row type="flex" justify="center" >
      <i-col :xs="24" :sm="12" :lg="8"  >
        <Row type="flex" justify="center" style="margin-bottom: 1rem;">
          <i-circle
            :size="200"
            :trail-width="4"
            :stroke-width="5"
            :percent="data.alreadyCheckPercent"
            stroke-linecap="square"
            stroke-color="#54DB94">
            <div class="demo-Circle-custom">
              <h1>{{data.alreadyCheck | num}}</h1>
              <p>累计已排查</p>
              <span>
                占比
                <i>{{data.alreadyCheckPercent}}%</i>
            </span>
            </div>
          </i-circle>
        </Row>
        <Row type="flex" justify="center">
          <Tag color="success">总货源: {{data.sum |num}}</Tag>
        </Row>

      </i-col>
      <i-col :xs="24" :sm="12" :lg="8">
        <Row type="flex" justify="center" style="margin-bottom: 1rem;">
          <i-circle
            :size="200"
            :trail-width="4"
            :stroke-width="5"
            :percent="data.soldOutCheckPercent"
            stroke-linecap="square"
            stroke-color="red">
            <div class="demo-Circle-custom">
              <h1>{{data.soldOut |num}}</h1>
              <p>已下架货源</p>
              <span>
                占比
                <i>{{data.soldOutCheckPercent}}%</i>
            </span>
            </div>
          </i-circle>
        </Row>
        <Row type="flex" justify="center" >
          <Tag color="success">已排查: {{data.alreadyCheck |num}}</Tag>
        </Row>
      </i-col>
    </Row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      data:{
        sum:0,
        alreadyCheck:0,
        soldOut:0,
        alreadyCheckPercent:0,
        soldOutCheckPercent:0,
      }
    }
  },
  filters : {
    num : (val,fix=2) => {
      //每个三位价格逗号
      val =""+val;
      val = val.split("").reverse().join("") // 翻转整数
      let temp = ""; // 临时变量
      for(let i = 0; i < val.length; i++) {
        temp += val[i];
        if((i + 1) % 3 == 0 && i != val.length -1) {
          temp += ",";	// 每隔三个数字拼接一个逗号
        }
      }
      temp = temp.split("").reverse().join("");	// 加完逗号之后翻转
      return temp;	// 返回
    }
  },
  created() {
    let self=this;
    self.$ApiProductSource.querySummary(null)
      .then(function (response) {
        if (response.success) {
          let map=response.result;
          self.data.sum=map.sum;
          self.data.alreadyCheck=map.alreadyCheck;
          self.data.soldOut=map.soldOut;
          self.data.alreadyCheckPercent=map.alreadyCheckPercent;
          self.data.soldOutCheckPercent=map.soldOutCheckPercent;
        }
      });
  },
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.demo-Circle-custom{
  & h1{
    color: #5365e0;
    font-size: 28px;
    font-weight: normal;
  }
  & p{
    color: #657180;
    font-size: 14px;
    margin: 10px 0 15px;
  }
  & span{
    display: block;
    padding-top: 15px;
    color: #657180;
    font-size: 14px;
    &:before{
      content: '';
      display: block;
      width: 50px;
      height: 1px;
      margin: 0 auto;
      background: #e0e3e6;
      position: relative;
      top: -15px;
    };
  }
  & span i{
    font-style: normal;
    color: #3f414d;
  }
}
.title{
  font-size: 20px;
  color: #454c5d;
}
</style>
